<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="/js/easyui1.5/themes/icon.css">
    <link rel="stylesheet" href="/js/easyui1.5/themes/default/easyui.css">
    <script src="/js/easyui1.5/jquery.easyui.min.js"></script>
    <link rel="stylesheet" href="/js/uploadify/uploadify.css">
    <script src="/js/uploadify/jquery.uploadify.min.js"></script>
</head>
<script type="text/javascript">
    $(function(){

        prpeFile();

    });

    function prpeFile(){
//上传插件
        $("#file").uploadify({
            //插件自带  不可忽略的参数
            'swf': '/js/uploadify/uploadify.swf',
            //前台请求后台的url 不可忽略的参数
            'uploader': '/img/addFile',
            //给div的进度条加背景 不可忽略
            'queueID': 'divimg1',
            //上传文件文件名
            'fileObjName' : 'file',//对应后后台接收文件的参数名字
            //给上传按钮设置文字
            'buttonText': '上传图片',
            //设置文件是否自动上传
            'auto': true,
            //可以同时选择多个文件 默认为true  不可忽略
            'multi': false,
            //上传文件的个数，项目中一共可以上传文件的个数
            'uploadLimit':  -1,
            //进度条消失的时间
            'removeTimeout' : 2,
            //开始执行上传
            'onUploadStart':function(files){
                console.log("文件开始上传了")
            },
            //上传失败
            'onUploadError':function(){
                alert("上传失败");
            },
            //不支持flash时调用
            'onFallback':function(){alert('不支持flash')},
            //成功回调函数 file：文件对象。data后台输出数据
            'onUploadSuccess':function(file,data,response){

                //file 上传的文件
                //data 文件上传接口的返回值
                //response  如果有响应就是true
                $("#imga1").prop("src",data)
                $("[name='url']").val(data);
            }
        });
    }
</script>
<script type="text/javascript"  th:inline="none">
    $(function () {
        $('#dialog_add').dialog('close');
        getLunBo();
    })
    function getLunBo(){
        $("#dg").datagrid({
            url:'/wenshi/querywsLunBo',
            striped:true,
            pagination:true,
            toolbar:"#gongneng",
            pageList:[1,2,3,4,5,7,10],
            pageSize:5,
            checkOnSelect:false,
            columns:[[
                {field:'xxx',title:'xx',width:100,checkbox:true,align:'center'},
                {field:'name',title:'标题',width:100,align:'center'},
                {field:'url',title:'图片',width:100,align:'center',
                    formatter:function(value,row,index){
                        return "<img width='77' src='"+value+"'>";
                    }
                },

                {field:'xsxs',title:'操作',width:300,align:'center',
                    formatter:function(value,row,index){
                        var content = " <a href='JavaScript:delUser("+row.userId+")' >删除</a> ";
                        content += " <a href='JavaScript:queryUserById("+row.userId+")' >修改</a> ";
                        return content;
                    }
                }
            ]]

        })
    }
    //点击新增按钮
    function addTaxi(){

        clearForm();
        $("#dialog_add").dialog('open');

    }
    //清除表单里面的数据  clearForm();
    function clearForm(){

        $("#add_form").form('clear');

        //清除插件
        $("#imga1").prop('src','');

    }
    //新增提交
    function submitData(){

        $("#add_form").form('submit',{
            url:"/wenshi/addwsLunBo",
            onSubmit: function(){ //在提交之前触发，返回false可以终止提交
                //editor.sync();
                return $('#add_form').form('validate');

            },
            success:function(data){

                $("#dialog_add").dialog('close');
                $("#dg").datagrid('reload');
            }
        })
    }
</script>

<body>
<div id="gongneng">
    <a id="btn_add" href="javascript:void(0)" class="easyui-linkbutton"    onClick='addTaxi()' data-options="iconCls:'icon-add'">新增</a>
</div>
<table id="dg" fit="true"></table>
<div id="dialog_add"  class="easyui-dialog" title="新增用户" style="width:600px;height:300px"
     data-options="iconCls:'icon-save',resizable:true,modal:true,
			buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					 submitData()//调用另一个方法
				}
			},{
				text:'关闭',
				iconCls:'icon-no',
				handler:function(){
				   $('#dialog_add').dialog('close');
				}
			}]">
    <form id="add_form">
        <input type="hidden" name="id">

        <table>
            <tr>
                <td>标题</td>
                <td><input name="name"></td>
            </tr>

            <tr>
                <td>图片</td>
                <td>
                    <img id="imga1" width="80">
                    <input type="text" name="url" >
                    <input id="file" type="file">
                    <div id="divimg1"> </div>

                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
